<!--
  单选 view 一般用作： form表单内使用 
  @author terrfly
  @site https://www.jeepay.vip
  @date 2022/12/01 16:18
-->
<template>
	<view>
		<view @tap="show">
			<!-- 插槽自定义内容 -->
			<slot name="view" :record="vdata.checkedData">
				<view class="selected-radio">
					<view v-if="hasVal()" style="color: black">{{vdata.checkedData?.label}}</view>
					<view v-else>{{props.label}}</view>
					<image src="/pageDevice/static/devIconImg/icon-arrow-sex.svg" mode="scaleToFill" />
				</view>
			</slot>
		</view>
		<!-- popup 和 tap不能放置在同一个 view下。  -->
		<view>
			<JSinglePopup ref="popupRef" :list="props.list"  @confirm="confirmFunc" />
		</view>
		
	</view>
</template>

<script setup>
import { ref, reactive, nextTick, watch, onMounted, inject } from "vue"

const popupRef = ref()

// emit 父组件使用： v-model:value="val" 进行双向绑定。
const emits = defineEmits(['update:value', 'change'])

const props = defineProps({
 
  //绑定的值， 双向绑定
  value: { type: [String, Number] },
  
  // 显示的名字
  label: { type: [String, Number], default: "请选择" },
  
  // 数组
  list: { type: Array, default: () => [] }
  
})


onMounted(()=>{
	changePropsVal(props.value)
})

// 切换时 
watch(() => props.value, (newVal, oldVal) => {
    changePropsVal(newVal)
  }
)



function changePropsVal(newVal){
	let list = props.list.filter(r => r.value == newVal)
	vdata.checkedData = list.length > 0 ? list[0] : { }
}


const vdata = reactive({
	
	checkedData: { } // 当前选择的值
	
})

function show(){
	popupRef.value.open(vdata.checkedData.value)
}


// 选择用户类型完毕
function confirmFunc(v){
	
	vdata.checkedData = v
	emits("update:value", v.value)
	emits("change", v.value)
}


function hasVal(){
	return vdata.checkedData && vdata.checkedData.label ? true : false
}



</script>

<style lang="scss" scoped>
	
	
	.selected-radio {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;

	  font-size: 32rpx;
	  color: #b3b3b3;
	  image {
	    width: 120rpx;
	    height: 120rpx;
	  }
	}
	
	
</style>
